<template>

  <section>
    <Header 
    @log_bottom="openMenu"/>
    <Loading />

    <div class="header-content">
      <div class="info">
        <aside>
          <h2>Get in teh</h2>
          <h2>drivers seat adn</h2>
          <h2>get paid</h2>
          <h3>Drive on te larges network of active riders</h3>
        </aside>
        <div class="btn-group">
          <a href="#"><span>Sign up to drive</span></a>
          <a href="#"><span>Talk to us</span></a>
        </div>
      </div>

      <section>
        <div class="menu">
          <i class="uil uil-times-circle" v-on:click="closeMenu"></i>
          <a href="#"><span>Consumer</span></a>
          <a href="#"><span>Professional</span></a>
          <a href="#"><span>Enterprise</span></a>
          <a href="#"><span>Explore</span></a>
          <a href="#"><span>About</span></a>
        </div>
      </section>
    </div>

  </section>


  

  
</template>



<script lang="ts">
import { gsap } from 'gsap'
import { defineComponent, reactive, onMounted, toRefs, computed } from 'vue';
import {car as car_info} from '@/public/data/db.json'


export const useModelWrapper = (props: { [x: string]: any; }, emit: (arg0: string, arg1: any) => any, name = 'modelValue') => {
  return computed({
    get: () => props[name],
    set: (value: any) => emit(`update:${name}`, value),
  })
}


export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
    }
  },
  setup(props: any, {emit}: any) {
    const header_menu = useModelWrapper(props, emit, 'visible')
    const {editData, visible} = toRefs(props)
    const data = reactive({
      header_value: ref(),
    })
    gsap.registerPlugin(ScrollTrigger)
    const tween = gsap.timeline({delay: 0.8, repeatDelay: 0.8})
    const car_data: any = ref([])


    const loadAnimation = () =>{
      tween.from(".info", {duration: 1, ease: 'power2', opacity: 0, y: 40})
      tween.to(".info", {duration: 1, ease: 'power2', opacity: 1, y: 0})
    }


    const closeMenu = () => {
      // tween.from(".menu", {duration: 1, ease: 'power2', opacity: 1, y: 0})
      tween.to(".menu", {duration: 0.5, ease: 'power1', opacity: 0, display: 'none', y: 400})
    }
    const openMenu = () => {
      tween.to(".menu", {duration: 0.5, ease: 'power2', opacity: 1, display: 'flex', y: 0})
    }

    
    // const car = (info: any) => {
    //   info.forEach((car: { id: any; duration: any; ease: any; position: { x: any; y: any; }; repeat: any; repeatDelay: any; sound_effect: any; }) => {
    //       const car_dom = document.querySelector(car.id)
    //       const effect = gsap.to(car_dom, {
    //         duration: car.duration,
    //         ease: car.ease,
    //         x: car.position.x,
    //         y: car.position.y,
    //         repeat: car.repeat,
    //         repeatDelay: car.repeatDelay,
    //         paused: false
    //       })

    //       const audio = new Audio(`@/public/sound/${car.sound_effect}`)
    //       const listener = addListener(car_dom, effect, audio)
    //       car_data.push({ car_dom, effect, listener })
    //   });
    // }

    // const addListener = (car_dom: any, effect: gsap.core.Tween, audio: HTMLAudioElement) => {
    //   const click = car_dom.addEventListener('click', () => {
    //     effect.paused(!effect.paused())
    //   })

    //   const dblclick = car_dom.addEventListener('dblclick', () => {
    //     effect.paused(!effect.paused())
    //   })

    //   return{click, dblclick}
    // }

    // const play = () => {
    //   car(car_info)
    //   car_data.forEach((car: { effect: { play: () => void; }; }) => {
    //     car.effect.play()
    //   })
    // }



    onMounted(() => {
      loadAnimation()
    })


    
  return {
    ...toRefs(data),
    loadAnimation,
    useModelWrapper,
    closeMenu,
    openMenu
  }
  }

})

</script>



<style scoped>
@import url(/assets/style.css);


* {
  color: rgb(221, 218, 218);
  font-family: "Poppins", sans-serif;
}

.header-content {
  /* border: 2px dashed var(--main--border-color); */
  justify-content: flex-start;
  height: var(--content-height);
  padding-left: var(--header-right-left-padding);
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  background: url(/public/images/background.svg) no-repeat center;
}

.header-content .info {
  display: flex;
  flex-direction: column;
  margin-top: 18rem;
  line-height: var(--screen-desktop-padding-top-bottom);
}

.header-content .info h2 {
  font-family: "Poppins", sans-serif;
  font-size: var(--screen-desktop-padding-top-bottom);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.header-content .info h3 {
  font-size: var(--main-font-size);
}

.header-content .info h2:nth-child(3){
  color: rgb(218, 233, 15);
}

.header-content .btn-group {
  display: flex;
  position: relative;
}

.header-content .btn-group a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-width);
  height: var(--screen-desktop-padding-top-bottom);
  border: 1px solid var(--topride-color);
  border-radius: 50px;
  transition: all 0.3s ease;
}

.header-content .btn-group a:not(:last-child) {
  margin-right: var(--screen-desktop-padding-top-bottom);
}

.header-content .btn-group a:hover {
  background-color: var(--topride-color);
  border: 1px solid yellow;
  color: yellow;
}

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 998;
  display: none;
}

.menu i {
  font-size: 1.7rem;
  position: fixed;
  right: 50px;
  top: 20px;
}

.menu i:hover {
  color: yellow;
  filter: blur(1);
  cursor: pointer;
}

.menu a {
  width: 7em;
  text-align: center;
  border: 1px solid var(--main-text-color);
  padding: 1rem;
  margin: 1rem;
  font-size: 2rem;
  border-radius: 10rem;
}

.menu a:hover {
  color: yellow;
  border-color: yellow;
}


</style>


